<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../utils/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="../JS/jquery-3.4.1.min.js"></script>
    <script src="../utils/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #F2F3F7;
        }

        .box {
            width: 400px;
            position: absolute;
            top: 20%;
            left: 40%;
        }

        h4 {
            position: absolute;
            top: 13%;
            left: 50%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .inp_wid {
            width: 90%;
            margin: 0 auto;
            background-color: #FFF8C4;
        }

        #login {
            margin: 15px auto;
            width: 90%;
        }
    </style>
</head>

<body>
    <h4 class="text-center">一卡通</h4>
    <div class="container" style="background-color: gray;">
        <div class="box" style="background-color: white;">
            <div>
                <form action="">
                    <label class="col-lg-12">账号</label>
                    <span><input type="text" name="userName" class="form-control inp_wid" id="userName"
                            onblur="CheckUseName()"></span>
                    <div class="inf_usename "></div>
                    <label class="col-lg-12">密码</label>
                    <input type="password" name="pwd" class="form-control inp_wid" id="pwd" onblur="CheckPwd()">
                    <div class="inf_pwd"></div>
                    <span><input type="button" value="登录" class="form-control btn-success" id="login"></span>
                </form>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $("#login").click(function () {
            if (check()) {
                $.ajax({
                    url: "/apis/Shopping/api/v1/login",
                    data: JSON.stringify({
                        userName: $("#userName").val(),
                        pwd: $("#pwd").val(),
                    }),
                    contentType: "application/json",
                    // 请求类型
                    type: "post",
                    // 响应体类型设置
                    dataType: "json",
                    // 成功回调
                    success: function (data) {
                        console.log(data);
                        if (data.errorCode == "0") {
                            window.location.href = "goods_Option.html";
                        }
                        else {
                            alert("账户密码错误")
                        }
                    },
                    // 超时时间
                    timeout: 5000,
                    // 失败回调
                    error: function () {
                        alert("出错了")
                    },
                    headers: {
                        c: 300,
                        d: 400,
                    },
                });
            } else {
                event.preventDefault();
            }
        })

        // 账号密码为true
        function check() {
            if (CheckUseName() && CheckPwd()) {
                return true;
            }
            return false;
        }

        // 验证账号是否为空
        function CheckUseName() {
            var $user = $("#userName").val();
            if ($user == "") {
                $(".inf_usename").html("账号不能为空")
                $(".inf_usename").addClass("pull-right")
                return false;
            }
            else {
                $(".inf_usename").html("")
                return true;
            }
        }
        // 验证密码是否为空
        function CheckPwd() {
            var $pwd = $("#pwd").val();
            if ($pwd == "") {
                $(".inf_pwd").html("密码不能为空")
                $(".inf_pwd").addClass("pull-right")
                return false;
            }
            else {
                $(".inf_pwd").html("")
                return true;
            }
        }
    </script>
</body>

</html>